<template>
  <section class="m_wrapper mb54 mt53">
    <div class="search_one">
      <form class="search_box clearfix">
        <input type="text" class="input_box fl" placeholder="搜索问题" />
        <a class="search fr">
          <svg aria-hidden="true"><use xlink:href="#icon-sousuo"></use></svg>
        </a>
      </form>
    </div>
    <van-tabs
      animated
      swipeable
      title-active-color="#48a5f4"
      color="transparent"
      @click="changetab"
    >
      <van-tab
        :title="item.title"
        v-for="item in title"
        :key="item.title"
        :name="item.name"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="finishedtext"
          @load="pulluprefresh"
        >
          <div v-for="item in answerlist" :key="item.id">
            <div class="box_con_a">
              <div class="list_item">
                <router-link to="/issue" class="list_con">
                  <h3 class="list_title">
                    {{ item.title }}
                  </h3>
                  <div class="list_txt">
                    {{ cate == "jx" ? item.mess.content : item.desc }}
                  </div>
                </router-link>
                <div class="list_bot clearfix">
                  <img
                    class="fl"
                    :src="
                      item.mess.user.avatar
                        ? item.mess.user.avatar
                        : 'https://liudediy.com/liude/images/pics_modle_46.png'
                    "
                  />
                  <a class="fl user_name">{{ item.user }} </a>
                  <p class="fl user_date">{{ item.time }}</p>
                  <p class="fl bot_label">{{ item.ban }}</p>
                  <p class="bot_fr fr">评论：{{ item.mess.child.length }}</p>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </section>
</template>

<script>
import "../../static/css/m_ask_style.css";
import "../../static/css/public_style.css";
import "../../static/js/public_icon_new";
import api from "@/utils/api.js";
import { dataFormat } from "@/common/js/generalmethod";
export default {
  data() {
    return {
      answerlist: "",
      title: [
        { title: "精选问题", name: "choice" },
        { title: "最近问答", name: "new" },
        { title: "待回答问题", name: "answered" },
      ],
      cate: "jx",
      loading: false, //加载中loading
      finished: false, //数据加载完成loading
      current_page: null, //上拉加载更多当前页
      last_page: null, //上拉加载更多最后页,
      finishedtext: "",
    };
  },
  watch: {},
  methods: {
    //获得精选问题列表
    getjxanswerlist() {
      api
        .postAPI(`/ask`)
        .then((res) => {
          //数据处理
          res.data.data.forEach(function (item) {
            item.mess.time = dataFormat(item.mess.time);
            item.time = dataFormat(item.time);
            if (
              item.mess.user.avatar !== "" &&
              item.mess.user.avatar.length < 50
            ) {
              item.mess.user.avatar = `${api.BASE_URL}` + item.mess.user.avatar;
            }
          });
          (this.current_page = res.data.current_page),
            (this.last_page = res.data.last_page),
            (this.answerlist = res.data.data);
          this.cate = "jx";
          this.finishedtext = "没有更多了";
        })
        .catch((err) => console.log(err));
    },
    //获得问题列表
    getanswerlist(cate) {
      api
        .postAPI(`/ask/index/cate/${cate}`)
        .then((res) => {
          //数据处理
          res.data.data.forEach(function (item) {
            item.mess.time = dataFormat(item.mess.time);
            item.time = dataFormat(item.time);
            if (
              item.mess.user.avatar !== "" &&
              item.mess.user.avatar.length < 50
            ) {
              item.mess.user.avatar = `${api.BASE_URL}` + item.mess.user.avatar;
            }
          });
          this.cate = cate;
          (this.last_page = res.data.last_page),
            (this.current_page = res.data.current_page);
          this.answerlist = res.data.data;
        })
        .catch((err) => console.log(err));
    },

    //切换tab标签
    changetab(name, title) {
      if (title == "精选问题") {
        this.getjxanswerlist();
      } else {
        this.getanswerlist(name);
        this.finishedtext = "没有更多了";
        this.finished = false;
        this.loading = false;
        console.log(this.finished);
      }
    },

    //上拉刷新
    pulluprefresh() {
      var _this = this;
      if (_this.cate !== "jx") {
        if (_this.current_page !== _this.last_page) {
          _this.current_page = _this.current_page + 1;
          console.log(_this.current_page, _this.last_page);
          setTimeout(function () {
            api
              .postAPI(
                `/ask/index/cate/${_this.cate}.html?page=${_this.current_page}`
              )
              .then((res) => {
                //数据处理
                res.data.data.forEach(function (item) {
                  item.mess.time = dataFormat(item.mess.time);
                  item.time = dataFormat(item.time);
                  if (
                    item.mess.user.avatar !== "" &&
                    item.mess.user.avatar.length < 50
                  ) {
                    item.mess.user.avatar =
                      `${api.BASE_URL}` + item.mess.user.avatar;
                  }
                });
                _this.answerlist = _this.answerlist.concat(...res.data.data);
                _this.loading = false;
              })
              .catch((err) => console.log(err));
          }, 1000);
        } else {
          _this.finished = true;
          console.log(_this.current_page, _this.last_page);
        }
      } else {
        _this.loading = false;
        _this.finished = true;
      }
      console.log(_this.current_page, _this.last_page);
    },
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {
    this.getjxanswerlist();
  },
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  components: {},
};
</script>

<style  scoped>
div >>> .van-loading {
  margin-top: -0.25rem !important;
}
div >>> .van-list__finished-text {
  margin-top: -0.25rem !important;
}
.search_one {
  padding: 0.1rem 0.15rem;
}
.advertising_box {
  margin: 0.15rem 0.15rem 0.08rem 0.15rem;
}
.sliding_con .swiper_box .swiper_box_item .swiper_top .swiper_fr img {
  left: 100%;
}
.m_wrapper >>> .van-tab--active {
  font-weight: bold;
}
.m_wrapper >>> .van-tabs__content--animated {
  border-top: 5px solid #f7f7f7;
}
.m_wrapper >>> .van-tab {
  line-height: 0.3rem;
  font-size: 0.16rem;
  text-align: center;
  color: black;
  font-weight: 700;
}
.sliding_con .swiper_box .swiper_box_item {
  padding: 0.12rem 0.15rem 0.1rem 0.15rem !important;
}
</style>
